<template>
  <div>
    <common-head title="京东商城" />
    <div class="wrap">
      <!-- 排序栏 -->
      <div class="filers">
        <div
          @click="switchOrder(0)"
          :class="[
            'sale',
            'filter',
            {
              active: active === 0,
            },
          ]"
        >
          <!-- 变量控制active  映射数组和对象 -->
          <span>销量</span>
        </div>
        <div
          @click="orderByprice"
          :class="[
            'price',
            'filter',
            {
              active: active === 1,
            },
          ]"
        >
          <span>价格</span>
          <div
            :class="[
              'triangle',
              'up',
              {
                active: active === 1 && priceOrder === 0,
              },
            ]"
          ></div>
          <div
            :class="[
              'triangle',
              'down',
              {
                active: active === 1 && priceOrder === 1,
              },
            ]"
          ></div>
        </div>
        <div
          @click="switchOrder(2)"
          :class="[
            'new',
            'filter',
            {
              active: active === 2,
            },
          ]"
        >
          <span>新品</span>
        </div>
      </div>
      <!-- 排序栏结束 -->
       <div class="box">
    <div class="item" @click='enterDetail(item.id)' v-for="item in items" :key="item.id">
      <img
       :src="item.pic" alt=""
        class="item-pic"
      />
      <span class="text">
        <img
          src="https://img10.360buyimg.com/jdphoto/jfs/t1/67472/23/16111/1062/5dd66228Ed3249693/c561eee12d153d56.png"
          alt=""
          class="ziying"
        />样样十元通通十元走过路过不要错过机会只有一次，珍惜每一次机会</span
      >
      <div class="jiage">
       <span class="price1">￥ {{item.minPrice}}</span>
       <span class="manjian">满减</span>
    <a href=""> <i class="icon icon-xiazai1"></i></a>
       <span class="about">看相似</span>
       
     </div>
    </div>
  </div>
    </div>
      <van-goods-action>
      <van-goods-action-icon @click="$router.push('/home')" icon="home-o" text="首页" />
      <van-goods-action-icon @click="$router.push('/cart')" icon="cart-o" text="购物车" />
      <van-goods-action-button color="#303030" type="warning" text="加入购物车" />
      <van-goods-action-button color="#FF734C" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import CommonHead from "_components/CommonHead"; /* 引入组件记得注册 */
import { fetchItems } from '_api'
 export default {
  data() {
    return {
      active: 0, // 0销量排序 1价格排序  2新品排序
      priceOrder: 1, //0价格升序  1价格降序
      items:[] 
    };
  },
  created () {//初始时调用
    this.fetchItems()
  },
  methods: {
       enterDetail (id) {
      // 点击进入详情
      this.$router.push(`/detail/${id}`)
    },
      fetchItems () {
        fetchItems({//请求商品列表 分类 和排序
            categoryId: this.$route.query.cateId, //第一个参数 指定获取分类下的id
           orderBy: this.orderBy
        }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data.result
        }
      })
      },
     switchOrder (active){//切换销量和发布事件
       this.active = active  //把点击active对应传过来
      this.fetchItems()//重新请求数据 重新排序

     },
     orderByprice(){//按照价格
      /*   1. 现在按照价格排序 切换升序或者降序  切换 priceOrder 0或者1
           2. 按照其他两个排序  active = 1 默认价格升序  priceOrder=0
      */
     if(this.active !== 1){ //按照销量新品排序 因为价格是1
     this.active = 1
     this.priceOrder= 0//默认升序
     }else{//按照价格排序 点击切换升序还是降序
        if(this.priceOrder === 0){
          this.priceOrder = 1 
        }else{
             this.priceOrder = 0     
        }
     }
     this.fetchItems()//重新请求列表，按照价格排序
     }
  },
  computed:{
      orderBy () {
          /*
          判断两个变量
          active 0 销量  2 发布时间  1 价格 取决于下面
          priceOrder 0价格升序  1价格降序  
           */
          let orderBy = 'ordersDown'            // 根据每个选项 根据变量来控制排序
          switch (this.active) {
              case 0://按照销量
                  orderBy = 'ordersDown'
                  break;
             case 1: //按照价格
             if(this.priceOrder === 0){
                  orderBy = 'priceUp'
             }else{
                 orderBy = 'priceDown'
             }
             break;
              case 2://按照发布时间
                  orderBy = 'addedDown'
                  break;
              default:
                  break;
          }
           return orderBy  //要加这一句 不然没反应
      }
  },
  components: {
    CommonHead,
  },
};
</script>

<style lang="scss" scoped>
.filers {
  font-size: 14px;
  color: #333;
  display: flex;
  height: 40px;
  background-color: #fff;
  border-top: 0.025rem solid rgb(238, 237, 237);
  align-items: center;
  justify-content: space-around;
  .filter {
    &.active {
      color: #ff734c;
    }
    &.price {
      position: relative;
      .triangle {
        width: 0;
        height: 0;
        border: 4px solid transparent;
        position: absolute;
        right: -9px;
        &.up {
          /* 相当于.triangle.up */
          border-bottom-color: #999;
          top: 2px;
          &.active {
            border-bottom-color: #ff734c;
          }
        }
        &.down {
          border-top-color: #999;
          top: 12px;
          &.active {
            border-top-color: #ff734c;
          }
        }
      }
    }
  }
}
.box {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
    flex-wrap: wrap;
}
.item {
  width: 50%;
  text-align: center;
}
.item-pic {
 width: 95%;
  border-radius: 15px 15px 0 0;
  height: 10.7297rem;
}
.ziying {
  width: 1.3946rem;
  margin-right: 4px;
  height: 0.9054rem;
}
.icon-xiazai1{
  font-size: 17px;
  color: red;
}
.text {
  margin-left: 10px;
  width: 190px;
  height: 35px;
  font-size: 13px;
overflow: hidden;
display: -webkit-box;
margin-left: 8px;
-webkit-box-orient: vertical;

-webkit-line-clamp: 2;

-ms-text-overflow: ellipsis;

text-overflow: ellipsis;
}
.price1{
  color: #fa2c19;
  margin-right: 50px;
    font-weight: 600;
}
.jiage{
width: 100%;
height: 30px;
padding-right: 20px;
text-align: center;
}
.manjian{
  border: 2px solid red;
  border-radius: 5px;
  color: #fa2c19;
  font-size: 12px;
  position: relative;
  right: 45px;
  padding: 0.027rem;
}
.about{
  color: grey;
  font-size: 0.6351rem;border: 1px solid gray;
  border-radius: 10px 10px;
  padding: 1px;
  position: relative;
  right: -20px;
  background: rgb(219, 217, 217);

}
</style>